<template>
	<view :data-theme="themeStyle">
		<mescroll-uni @getData="getData" refs="mescroll"  :size="10" v-if="addonIsExit.pintuan">
			<block slot="list">
				<ns-adv keyword="NS_PINTUAN"></ns-adv>
				<!-- 排序 -->
				<view class="sort-wrap">
					<view class="comprehensive-wrap" :class="{ 'ns-text-color': orderType === '' }" @click="sortTabClick('')" >
						<text :class="{ 'ns-text-color': orderType === '' }">综合</text>
					</view>
					<view :class="{ 'ns-text-color': orderType === 'sale_num' }" @click="sortTabClick('sale_num')">销量</view>
					<view class="price-wrap" @click="sortTabClick('discount_price')">
						<text :class="{ 'ns-text-color': orderType === 'discount_price' }">口碑</text>
					</view>
					
				</view>
				<view class="pintuan-page">
					<view class="pintuan-list" v-if="dataList.length">
						<ns-goods-item-col :value="dataList" @toDetail="toDetail" type="pintuan"></ns-goods-item-col>
					</view>
				</view>
				<view v-if="!dataList.length"><ns-empty :fixed="!1"></ns-empty></view>
			</block>
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-show-toast></ns-show-toast>
	</view>
</template>

<script>
import nsAdv from '@/components/ns-adv/ns-adv.vue';
import globalConfig from '@/common/js/golbalConfig.js';
import nsGoodsItemCol from '@/components/ns-goods-item/ns-goods-item-col.vue';
// import list from '../public/js/list.js';
import nsShowToast from '@/components/ns-show-toast/ns-show-toast.vue'
export default {
	components: {
		nsAdv,
		nsGoodsItemCol,
		nsShowToast
	},
	data() {
		return {
			dataList: [],
			loadingType: 'loading', //加载更多状态
			orderType: '',
			priceOrder: 'desc', //1 价格从低到高 2价格从高到低
			categoryList: [], //排序类型
			goodsList: [],
			showScreen: false,
			order: '',
			sort: 'desc',
		};
	},
	mixins:[globalConfig],
	onLoad(options) {},
	onShow() {
		// 刷新多语言
		if(!this.addonIsExit.pintuan){
			this.$util.showToast({
				title:'商家未开启秒杀',
				mask:true,
				duration:2000
			})
			setTimeout(()=>{
				this.$util.redirectTo('/pages/index/index/index',{},'redirectTo')
			},2000)
			return;
		}
		
		
		this.$langConfig.refresh();
	},
	methods: {
		//筛选点击
		sortTabClick(tag,mescroll) {
			// console.log("123",mescroll)
			if (tag == 'sale_num') {
				this.order = 'sale_num';
				this.sort = 'desc';
				this.getData('','sale_num')
			} else if (tag == 'discount_price') {
				this.order = 'discount_price';
				this.sort = 'desc';
				this.getData('','discount_price')
			} else if (tag == 'screen') {
				this.getData('','')
				//筛选
				this.showScreen = true;
				return;
			} else {
				this.getData('','')
				this.order = '';
				this.sort = '';
			}
		
			if (this.orderType === tag && tag !== 'discount_price') return;
		
			this.orderType = tag;
			if (tag === 'discount_price') {
				this.priceOrder = this.priceOrder === 'asc' ? 'desc' : 'asc';
				this.sort = this.priceOrder;
			} else {
				this.priceOrder = '';
			}
			this.emptyShow = false;
			this.goodsList = [];
			// this.$refs.mescroll.refresh();
		},
		getData(mescroll,order) {
			this.$api.sendRequest({
				url: '/pintuan/api/goods/page',
				data: {
					page_size:1000,
					page:1,
					order:order,
					sort:'desc'
				},
				success: res => {
					let newArr = [];
					let msg = res.message;
					this.dataList=res.data.list
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({ title: msg });
					}
					mescroll.endSuccess(newArr.length);
					// 设置列表数据
					// if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					// this.dataList = this.dataList.concat(newArr); //追加新数据
					if (this.$refs.loadingCover) 
					this.$refs.loadingCover.hide();
				},
				fail() {
					//联网失败的回调
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},
		toDetail(e) {
			this.$util.redirectTo('/promotionpages/pintuan/detail/detail', {
				id: e.id
			});
		},
		imageError(index) {
			this.dataList[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		}
	}
};

</script>


<style lang="scss">
.pintuan-top {
	width: 100%;

	image {
		width: 100%;
	}
}
.sort-wrap {
		display: flex;
		padding: 10rpx 20rpx 10rpx 0;
		background: #FFFFFF;
		> view {
			flex: 1;
			text-align: center;
			font-size: $ns-font-size-lg;
			height: 60rpx;
			line-height: 60rpx;
		}
		.comprehensive-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			.iconfont-wrap {
				display: inline-block;
				margin-left: 10rpx;
				width: 40rpx;
				.iconfont {
					font-size:  $ns-font-size-x-lg;
					line-height: 1;
					margin-bottom: 5rpx;
				}
			}
		}
		.price-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			.iconfont-wrap {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-left: 10rpx;
				width: 40rpx;
				margin-bottom: 12rpx;
				.iconfont {
					float: left;
					font-size:  $ns-font-size-x-lg;
					line-height: 1;
					height: 20rpx;
				}
			}
		}
		.screen-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			.iconfont-wrap {
				display: inline-block;
				margin-left: 10rpx;
				width: 40rpx;
				.iconfont {
					font-size:  $ns-font-size-xx-lg;
					line-height: 1;
				}
			}
		}
	}
.pintuan-page {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: $ns-margin;

	.pintuan-use {
		width: 100%;
		padding: $ns-padding;
		box-sizing: border-box;
		border-radius: $ns-border-radius;
		background: #ffffff;

		.use-title {
			width: 100%;
			margin-bottom: $ns-margin;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 50rpx;
			}

			text {
				padding: 0 $ns-padding;
			}
		}

		.use-step {
			display: flex;
			justify-content: center;
			align-items: center;

			.step-con {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				line-height: 0;
				border-radius: 100%;
				font-size: $ns-font-size-base;
				width: 100rpx;

				.step-title {
					color: $ns-text-color-gray;
					line-height: 1.2;
					font-size: $ns-font-size-base;
				}

				.step-con-icon {
					width: 100%;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
				}

				.iconfont {
					font-size: 68rpx;
				}
				.iconyaoqing {
					font-size: 68rpx;
				}
				.iconfahuodai {
					font-size: 72rpx;
				}
			}

			.next-step {
				width: 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 14rpx;

				view {
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
				}

				view:nth-child(1) {
					opacity:0.2;
				}

				view:nth-child(2) {
					opacity:0.5;
				}

				view:nth-child(3) {
					opacity:0.8;
				}
			}
		}
	}

	.pintuan-list {
		.list-item {
			// width: 702rpx;
			// margin: 0 auto;
			// background: #fff;
			// border-radius: 10rpx;
			// // padding: 12px 12px 15px;
			// box-sizing: border-box;
			// display: flex;
			// margin-bottom: 18rpx;

			// .item-image {
			// 	position: relative;
			// 	overflow: hidden;
			// 	display: flex;
			// 	justify-content: center;
			// 	align-items: center;
			// 	width: 200rpx;
			// 	height: 200rpx;
			// 	border-radius: 6rpx;

			// 	image {
			// 		max-width: 100%;
			// 		max-height: 100%;
			// 	}
			// }

			// .item-desc {
			// 	flex: 1;
			// 	height: 100%;
			// 	padding-left: $ns-padding;
			// 	box-sizing: border-box;
			// 	display: flex;
			// 	justify-content: space-between;
			// 	flex-direction: column;

			// 	.desc-title {
			// 		font-size: $ns-font-size-base;
			// 		overflow: hidden;
			// 		text-overflow: ellipsis;
			// 		display: -webkit-box;
			// 		-webkit-line-clamp: 2;
			// 		-webkit-box-orient: vertical;
			// 		line-height: 1.5;
			// 		color: #000;
			// 	}

			// 	.desc-con {
			// 		width: 100%;
			// 		display: flex;
			// 		justify-content: space-between;
			// 		align-items: flex-end;

			// 		.desc-price {
			// 			display: flex;
			// 			flex-direction: column;
			// 			line-height: 1;
			// 			.price-num{
			// 				display: flex;
			// 				align-items: center;
			// 				margin-top: 20rpx;
			// 				.clustering-num {
			// 					font-size: 20rpx;
			// 					border-radius: 5rpx;
			// 					line-height: 1;
			// 					padding: 6rpx 6rpx;
			// 					margin-left: 10rpx;
			// 				}
			// 			}
			// 			.price-size {
			// 				display: flex;
			// 				flex-direction: column;
			// 				margin-top: 23rpx;
			// 				justify-content: flex-end;
			// 				margin-right: 10rpx;
			// 			}
			// 		}

			// 		.old-price {
			// 			text-decoration: line-through;
			// 			color: #777;
			// 			font-size: 22rpx;
			// 			line-height: 1;
			// 		}
			// 		.spell-group{
			// 			padding: 2rpx 4rpx;
			// 			border: 1px solid $base-color;
			// 			font-size: 22rpx;
			// 			border-radius: 6rpx;
			// 			line-height: 1;
			// 		}
			// 		.old-price-sales{
			// 			font-size: 28rpx;
			// 			margin-top: 18rpx;
			// 		}

			// 		.desc-pin {
			// 			display: flex;
			// 			justify-content: center;
			// 			align-items: center;
			// 			font-size: 24rpx;
			// 			color: #fff;
			// 			height: 50rpx;
			// 			width: 136rpx;
			// 			border-radius: 48rpx;
			// 		}
			// 	}
			// }
		}
	}
}

.pintuan_game {
	width: 100%;
}

.empty {
	margin-top: 100rpx;
}
</style>
